<template>
  <div class="toast"  v-show="isShow">
    <div>{{message}}</div>
  </div>
</template>

<script>
export default {
  name: 'Toast',

  data() {
    return {
      message:'',
      isShow: false
    };
  },

  mounted() {

  },

  methods: {
    show(message="默认文字", duration="2000") {
      console.log(message, duration);

      console.log('-----');
      this.isShow = true;
      this.message = message

      setTimeout(() => {
        this.isShow = false;
        this.message = ''
      }, duration)
    }
  },

  props: {
    // message: {
    //   type: String,
    //   default: ''
    // },
    // show: {
    //   type: Boolean,
    //   default:false
    // }
  }
};
</script>

<style lang="css" scoped>
  .toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 4px 12px;
    /* width: 150px;
    height: 30px; */
    text-align: center;
    line-height: 30px;
    border-radius: 8px;
    color:white;
    background-color: rgba(0,0,0, .5);
    z-index: 999;
  }
</style>